<template>
  <view class="t-flex main">
    <view class="warning" v-if="user && user.distribution_user && user.distribution_user.user_vip_info">
      <text class="t-size-30" style="color: #e73838"
        >您已开通{{ user.distribution_user.user_vip_info.title }}会员，享受特权，{{
          $wanlshop.timeFormat(user.distribution_user.expires_time * 1000)
        }}到期</text
      >
    </view>

    <swiper
      class="swiper"
      circular
      indicator-dots
      previous-margin="100rpx"
      next-margin="100rpx"
      @change="swiperChange"
      indicator-color="#EFEFEF"
      indicator-active-color="#B9BDBA"
    >
      <swiper-item v-for="(item, index) in vipList" :key="index">
        <view class="swiper-item" :class="[{ current: current != index }]">
          <!-- /static/images/vip/vip_01.png -->
          <image class="swiper-item-img" :src="$wanlshop.oss(item.image)" mode=""></image>
          <view class="swiper-item-info">
            <view class="vip-price">
              <text class="t-color-fff t-size-24">¥</text>
              <text class="t-color-fff" style="font-size: 90rpx">{{ item.price * 1 }}</text>
              <text class="t-color-fff t-size-24">/年</text>
              <!-- <text class="t-color-fff t-size-24" style="opacity: 0.5;text-decoration:line-through;margin-left: 20rpx;">原价：{{item.price * 1}}</text> -->
            </view>
          </view>

          <view class="vip-but">
            <text class="t-color-fff t-size-28" @click="openVip(index)">立即开通</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view style="width: 690rpx">
      <view>
        <text class="t-size-32 t-font-700">会员卡特权</text>
      </view>
      <view style="margin-top: 10rpx" v-if="vipList[current]">
        <!-- <text class="t-size-28  t-color-666"></text> -->
        <rich-text :nodes="vipList[current].content"></rich-text>
      </view>
    </view>

    <view class="" style="margin: 88rpx 0; width: 690rpx">
      <!-- <text class="t-size-24" style="color: #E73838;" >温馨提示：续费当前等级的剩余天数累加，购买其它等级，剩余天数不累加，从购买日起，剩余30天。</text> -->
    </view>

    <view class="but t-flex" @click="openVip(current)">
      <text class="t-color-fff" v-if="user && user.distribution_user && user.distribution_user.user_vip_info"
        >立即续费</text
      >
      <text class="t-color-fff" v-else>立即开通</text>
    </view>
  </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      current: 0,
      vipList: [],
    };
  },
  onLoad() {
    this.getList();
  },
  onPullDownRefresh() {},
  onReachBottom() {},
  methods: {
    getList() {
      this.$api.get({
        baseUrl: this.$wanlshop.config('vipBaseUrl'),
        url: '/distribution/user_vip/index',
        data: {},
        success: res => {
          console.log('res ========>', res);
          this.vipList = res;
        },
      });
    },
    openVip(index) {
      // 创建支付订单
      this.$api.post({
        baseUrl: this.$wanlshop.config('vipBaseUrl'),
        url: '/distribution/user_upgrade/add',
        data: {
          user_vip_id: this.vipList[index].id,
        },
        contentType: 'form',
        loadingTip: '提交订单中...',
        success: res => {
          console.log('创建支付订单 ========>', res);

          // this.price = data[0].price;
          // this.order_type = data[0].type;
          // this.order_no = `${data[0].type == 'groups' ? '拼团':''}订单号：${data[0].order_no}`;
          // this.order_pay_no = data[0].pay_no;
          // this.order_id = data[0].order_id;

          this.$wanlshop.to(`/pages/user/money/pay?vipPay=${JSON.stringify(res)}`);
          // this.$wanlshop.to(`/pages/user/money/pay?data=${JSON.stringify([{
          // 	price:res.price,
          // 	order_pay_no:res.order_sn,
          // 	order_no:res.order_sn,
          // 	order_id:res.id,
          // }])}`);
        },
      });
    },
    swiperChange(event) {
      console.log('event ========>', event.detail.current);
      this.current = event.detail.current;
    },
  },
};
</script>
<style lang="scss" scoped>
.t-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
}
.t-color-333 {
  color: #333333;
}

.t-size-40 {
  font-size: 40rpx;
}

.t-size-32 {
  font-size: 32rpx;
}
.t-size-30 {
  font-size: 30rpx;
}

.t-size-24 {
  font-size: 24rpx;
}

.t-size-28 {
  font-size: 28rpx;
}

.t-color-666 {
  color: #666666;
}

.t-color-fff {
  color: #ffffff;
}
.t-font-700 {
  font-weight: 700;
}
.main {
  width: 750rpx;
  align-items: center;
}

.warning {
  background-color: #fcebeb;
  width: 750rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 32rpx;
  margin-bottom: 20rpx;
}

.swiper {
  width: 750rpx;
  height: 420rpx;
}
.swiper-item {
  // width: 100%;
  height: 320rpx;
  border-radius: 15rpx;
  overflow: hidden;
  transition: all 0.6s;
  position: relative;
  // background-color: #9a9a9a;
}
.current {
  transform: scale(0.9, 0.9) translateX(-0%);
}
.swiper-item-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // transform: scale(1.1)
}
.swiper-item-info {
  position: absolute;
  z-index: 1;
}
.vip-price {
  margin: 40rpx 0 0 30rpx;
}
.vip-but {
  width: 178rpx;
  height: 62rpx;
  border-radius: 36rpx;
  border: 2rpx solid #ffffff;
  line-height: 62rpx;
  text-align: center;
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
}
.but {
  width: 524rpx;
  height: 86rpx;
  background: #e73838;
  border-radius: 12rpx;

  justify-content: center;
  align-items: center;
}
</style>
